<template>
  <div class="son2">
    <h3>我是son2.vue</h3>
    <button @click="getData">我要拿son1的数据 -- 相当于点了关注</button>
  </div>
</template>

<script>
// import bus from '../eventBus/index.js'

// 如果文件后缀是.js或者.vue，可以省略后缀
// import bus from '../eventBus/index'
// 甚至连文件名都能省略
// 如果一个文件夹里的文件叫package.json、index.js 或 index.vue，文件名都可以省略
// import bus from '../eventBus'

// 在脚手架中，用@代表src目录
// import bus from '@/eventBus'

export default {

  data() {
    return {
      timer: null,
    };
  },

  // 当这个组件一诞生就自动订阅了组件传值（相当于关注了公众号）
  created() {

    this.$bus.$on("son1Send", (data) => {
      console.log("son1给数据了，数据是：", data);
    });


    this.timer = setInterval(() => {
      
      console.log('我是son2里开的定时器')
    }, 1000);
  },

  methods: {
    getData() {
      // console.log('点了关注')
      // // 它要拿数据
      // // 当son1发送数据来了会自动调用参数2的回调函数
      // // 并且这个回调函数的参数就是son1传递的数据
      // this.$bus.$on('son1Send', (data) => {
      //     console.log('son1给数据了，数据是：', data)
      // })
    },
  },

  beforeDestroy () {
    console.log('son2即将销毁了')
  },

  destroyed () {
    console.log('son2已销毁')

    // 移除定时器
    clearInterval(this.timer)
    // 取关
    this.$bus.$off("son1Send")
  }
};
</script>

<style>
.son2 {
  width: 350px;
  height: 230px;
  border: 1px solid #000;
}
</style>